<template>
    <scroll-view class="say_story" scroll-y="true" style="height:100vh">

        <view class="t-padded-l-40 t-padded-r-40 t-margin-l-10 t-margin-r-10">
            <navigator url="/pages/search/index" open-type="navigate">
                <search-input type="primary" :isShowBtn="false" ></search-input>
            </navigator>
        </view>

        <view class="swipes">
            <swiper class="imageContainer" @change="handleChange"  previous-margin="50rpx" next-margin="50rpx" circular  autoplay>
                <block v-for="(item,index) in swiperList" :key="index">
                    <swiper-item class="swiperitem">

                            <image @click="opearte(item)" class="itemImg" :class="currentIndex == index ? 'swiperactive': ''" :src="item.pic_link.origin+'?x-oss-process=image/resize,m_fill,h_640,w_300'" lazy-load mode="scaleToFill"></image>

                    </swiper-item>
                </block>
            </swiper>
<!--            <bw-img-upload style="width:100%" ></bw-img-upload>-->
<!--            <bw-swiper :swiperList="swiperList" :swiperType="true" :duration="1000" :interval="3000" :indicatorDots="false" style="width:100%" class="swipers"></bw-swiper>-->
        </view>
        <view class="story_class">
            <view class="title">
                <view class="line_left"></view>
                <image src="/static/img/jingmei.png" class="jingmei"></image>
                <text class="font-regular">故事分类</text>
                <view class="line_right"></view>
            </view>
            <view class="lists">
                <view class="list_box"  v-for="(items,key) in subjectType" :key="key">

                    <navigator :url="'../story/classification/index?id='+item.id"  v-for="(item,ckey) in items" :key="ckey" open-type="navigate" class="list">
                        <view class="img_box">
                            <image :src="item.thumb_link.origin+'?x-oss-process=image/resize,m_fill,h_300,w_300'" class="img"></image>
                        </view>
                        <view class="name font-regular">{{item.title}}</view>
                    </navigator>

                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script>
  import Request from '@/utils/request.js'
  import tool from '@/utils/tool.js'
  import SearchInput from '../../components/searchInput/'
  import CourseIndex from "../../components/course/index"
  // import bwSwiper from '@/components/bw-swiper/bw-swiper.vue'
  export default {
    name: "index",
    components: {CourseIndex, SearchInput},
    // components:{
    //     bwSwiper
    // },
    data() {
      return {
        currentIndex: 0,
        subjectType: {},
        swiperList: [
        ]
      }
    },
    created:function(){
      uni.showLoading();
      this.getType();
      this.getSilder();
    },
    methods: {
      getSilder(){
        Request.get('/common/slider?module=sayStore').then((res)=>{
          this.swiperList=res.data;
        })
      },
      opearte(items) {
        let url = items.url
        let http = url.indexOf("http") == 0
        let page = url.indexOf("/") == 0
        if (http) {
          console.info(11)
          url  = `/pages/webview/index?url=${url}`
        } else if (page) {
          url = url
        }

        //跳转app
        if(url.indexOf('appId://')==0){
          let path = url.split('/');
          let appId = path[2];
          path.shift();
          path.shift();
          path.shift();
          path = path.join('/');
          tool.toOtherApp(appId,path);
        }else{
          uni.navigateTo({
            url
          });
        }


        uni.navigateTo({
          url
        });
      },
      getType() {
        Request.get('/tape/type?@sort=ranking.desc&pageSize=50').then((res) => {
            let arr=[];
            let tmp=[];
            for(let key in res.data){
                if(key%2==0){
                  tmp=[];
                  tmp.push(res.data[key]);
                }else{
                  tmp.push(res.data[key]);
                  arr.push(tmp);
                  tmp=[];
                }
            }
            // 万一有落单的的
            if(tmp){
              arr.push(tmp);
            }

            this.subjectType = arr;
            uni.hideLoading();
        })
      },
      handleChange(e) {
        this.currentIndex = e.detail.current;
      }
    }
  }
</script>

<style lang="scss">
    .swipes{
        margin-top: 10upx;
        // 3D轮播样式
        .imageContainer {
            width: 100%;
            /* height: 500rpx; */
            /* background: #000; */
            height: 300upx;
            background-color: #fff;
        }

        .swiperitem {
            /* height: 500rpx; */
            height: 300upx;
            padding: 0upx 20upx;
            box-sizing: border-box;
            position: relative;
            .swiperText {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: absolute;
                top: 56upx;
                left: 51upx;
                z-index: 998;
                width:162upx;
                height:163upx;
                background:rgba(255,255,255,1);
                border-radius:8upx;
                padding:10upx;
                .name {
                    font-size:26upx;
                    font-weight:500;
                    color:rgba(253,57,91,1);
                    line-height:37upx;
                    margin-bottom: 10upx;
                }
                .zq,.cz {
                    font-size:20upx;
                    color:rgba(253,57,91,1);
                    line-height:35upx;
                }
                .addNl {
                    width:120upx;
                    height:26upx;
                    background:rgba(253,57,91,1);
                    border-radius:13upx;
                    font-size:20upx;
                    font-weight:500;
                    color:rgba(255,255,255,1);
                    text-align: center;
                    line-height: 26upx;
                    margin-top: 10upx;
                }

            }
        }

        .itemImg {
            position: absolute;
            width: 610upx;
            /* height: 380rpx; */
            height: 300upx;
            border-radius: 15rpx;
            z-index: 5;
            opacity: 0.7;
            top: 2%;
            box-shadow:0px 4upx 15upx 0px rgba(153,153,153,0.24);
        }

        .swiperactive {
            width: 610upx;
            overflow: hidden;
            opacity: 1;
            z-index: 10;
            /* height: 430rpx; */
            height: 300upx;
            top: 0%;
            transition: all .2s ease-in 0s;
        }

    }
    .say_story {
        padding-top: 90upx;
        .story_class {
            padding: 0upx 40upx;
            .title {
                text-align: center;
                font-size: 30upx;
                color: $uni-color-664e37;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 40upx 0;
                .jingmei{
                    width: 100upx;
                    height: 50upx;
                    margin-right: 5upx;
                }
                .line_left,.line_right{
                    width: 165upx;
                    height: 2upx;
                    background-color: #e0e0e0;
                }
                .line_left{
                    margin-right: 37upx;
                }.line_right{
                    margin-left: 37upx;
                }
            }
            .lists {
                .list_box {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 50upx;
                    .list {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .img_box {
                            width: 300upx;
                            height: 300upx;
                            border-radius: 20upx;
                            box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.2);
                            overflow: hidden;
                            .img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .name {
                            font-size: $uni-font-size-base;
                            color: $uni-color-664e37;
                            line-height: 48upx;
                            padding-top: 12upx;
                        }
                    }
                }

            }
        }
    }
</style>
